<template>
  <div class="down-app-vessel" v-show="showPopup">
    <div class="down-app-box">
      <img src="../images/login_close.png" class="down-pic1" @click="closeDownModal"/>
      <span class="down-text">扫码下载手机客户端 浏览体验更佳</span>
      <img src="../images/login_qr.png" class="down-pic2"/>
      <span class="port-text">手机客户端</span>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      showDownModal: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showPopup: false
      }
    },
    mounted() {
      this.showPopup = this.showDownModal;
    },
    methods: {
      closeDownModal() {
        this.showPopup = false;
        this.$emit("closeDownModal");
      }
    },
    watch: {
      showDownModal(newVal, oldVal) {
        this.showPopup = newVal;
      },
      showPopup(val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style lang="less" scoped>
  @import "../assets/mixin";

  .down-app-vessel {
    .fixed-center(fixed, 100, 0.5);
    .down-app-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      .wh(640px, 450px);
      background: rgba(252, 254, 255, 1);
      border-radius: 4px;
      .down-pic1 {
        margin-left: auto;
        padding-top: 16px;
        padding-right: 15px;
        padding-bottom: 5px;
        .wh(20px, 20px);
      }
      .down-text {
        width: 185px;
        text-align: center;
        font-weight: bold;
        margin-bottom: 74px;
        .size-color(20px, #333333);
      }
      .down-pic2 {
        .wh(144px, 144px);
      }
      .port-text {
        padding-top: 16px;
        .size-color(14px, #4D4D4D);
      }
    }
  }

</style>
